<template>
  <view class="container bs-address-form">
    <view class="common-header-xian"></view>
    <!-- 表单 -->
    <form @submit="saveData">
      <view class="address-cont-title b-f b-b">
        <view class="list address-box dis-flex b-b">
          <view class="left-name">
            <text class="f-30">收货人：</text>
          </view>
          <view class="right-cont flex-box">
            <input name="name" placeholder="请输入收货人姓名" :value="name"/>
          </view>
        </view>
        <view class="list address-box dis-flex">
          <view class="left-name">
            <text class="f-30">手机号：</text>
          </view>
          <view class="right-cont flex-box">
            <input maxlength="11" name="phone" placeholder="请输入收货人联系电话" type="number" :value="phone"/>
          </view>
        </view>
      </view>
      <view class="address-cont-title b-f b-b">
        <view class="dis-flex list address-box m-top20 b-b">
          <view class="left-name">
            <text class="f-30">所在地区：</text>
          </view>
          <view class="address-cont-box flex-box">
            <view @click="openRegion">
              <text v-if="region" class="f-30">{{ region }}</text>
              <text v-else class="f-30 col-7">选择省、市、区</text>
            </view>
            <u-picker mode="region"
                      v-model="showRegion"
                      :params="regionParam"
                      :mask-close-able="false"
                      @confirm="confirmRegion"
                      :default-region="default_region"
            ></u-picker>
          </view>
        </view>
        <view class="dis-flex list address-box">
          <view class="left-name">
            <text class="f-30">详细地址：</text>
          </view>
          <view class="right-cont flex-box">
            <textarea class="address-detail f-30" name="detail" placeholder="请输入详细地址，如小区、门牌号等"
                      :value="detail" auto-height/>
          </view>
        </view>

      </view>
      <view class="address-cont-title b-f b-b">
        <view class="list address-box dis-flex b-b">
          <view class="left-name">
            <text class="f-30">默认：</text>
          </view>
          <view class="right-cont flex-box">
            <radio-group @change="setDefault">
              <label class="radio">
                <radio value="1" :checked="is_default==1"/>是</label>
              <label class="radio">
                <radio value="0" :checked="is_default==0"/>否</label>
            </radio-group>
          </view>
        </view>
      </view>
      <!-- <view class="padding-box m-top35 btn-green btn-sm">
<button class="f-32" catchtap="chooseAddress">一键获取微信地址</button>
</view> -->
      <view class="padding-box m-top20 profile-btn">
        <button formType="submit" :disabled="disabled">保存</button>
      </view>
    </form>
  </view>
</template>

<script>
import address_api from "@/common/address_api";

export default {
  data() {
    return {
      showRegion: false,
      regionParam: {
        province: true,
        city: true,
        area: true
      },
      disabled: false,
      address_id:0,
      name: '',
      default_region: ['北京市','市辖区','东城区'],
      region: '',
      province: '',
      city: '',
      area: '',
      phone: '',
      detail: '',
      is_default: 0,
      error: ''
    };
  },
  onLoad: function (options) {
    if (options.address_id){
      this.getInfo(options.address_id)
    }
  },
  methods: {
    getInfo(address_id){
      address_api.get({address_id:address_id}).then(res => {
        if (res.code !== 0){
          this.$u.toast(res.msg)
          return false
        }
        this.setData({
          address_id: res.data.address_id,
          name: res.data.name,
          phone: res.data.phone,
          region: res.data.region,
          province: res.data.province,
          city: res.data.city,
          area: res.data.area,
          detail: res.data.detail,
          is_default: res.data.is_default,
          default_region: res.data.default_region
        })
      })
    },

    setDefault(e){
      let that = this;
      that.setData({
        is_default: parseInt(e.detail.value)
      });
    },
    openRegion: function () {
      this.setData({
        showRegion: true
      });
    },
    confirmRegion: function (e) {
      console.log(e)
      this.setData({
        province: e.province.label,
        city: e.city.label,
        area: e.area.label,
        region: e.province.label + '/' + e.city.label + '/' + e.area.label,
      })
    },
    /**
     * 表单提交
     */
    saveData: function (e) {
      let that = this;
      let values = e.detail.value;
      values.region = this.region;

      // 表单验证
      if (!that.validation(values)) {
        that.$u.toast(that.error);
        return false;
      }

      // 按钮禁用
      that.setData({
        disabled: true
      });
      values.is_default = that.is_default
      values.address_id = that.address_id

      // 提交到后端
      address_api.action(values).then(res => {
        that.$u.toast(res.msg)
        if (res.code === 0) {
          uni.navigateBack();
        }
      }).finally(() => {
        that.setData({
          disabled: false
        })
      })
    },

    /**
     * 表单验证
     */
    validation: function (values) {
      if (values.name === '') {
        this.error = '收件人不能为空';
        return false;
      }
      if (values.phone.length < 1) {
        this.error = '手机号不能为空';
        return false;
      }
      if (values.phone.length !== 11) {
        this.error = '手机号长度有误';
        return false;
      }
      // 定义中国大陆手机号的正则表达式
      const PHONE_REGEXP = /^1[3-9]\d{9}$/;
      // 验证手机号是否符合要求
      if (!PHONE_REGEXP.test(values.phone)) {
        this.error = '手机号不符合要求';
        return false;
      }
      if (!this.region) {
        this.error = '省市区不能空';
        return false;
      }
      if (values.detail === '') {
        this.error = '详细地址不能为空';
        return false;
      }
      return true;
    },


    /**
     * 获取微信地址
     */
    // chooseAddress: function() {
    //   let _this = this;
    //   wx.chooseAddress({
    //     success: function(res) {
    //       _this.setData({
    //         name: res.userName,
    //         phone: res.telNumber,
    //         region: [res.provinceName, res.cityName, res.countyName],
    //         detail: res.detailInfo
    //       });
    //     }
    //   })
    // },


  }
};
</script>
<style lang="scss" scoped>
@import 'form.scss';
</style>
